<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>网页学习基础</title>
    <link rel="stylesheet" type="text/css" href="../css/common.css"/>


    <datalist id="web_list">
        <option label="baidu" value="http://www.baidu.com"/>
        <option label="alibaba" value="http://www.alibaba.com"/>
        <option label="tencent" value="http://www.tencent.com"/>
    </datalist>

</head>
<body>
<!--
html中三种弹出框：
alert(); //警告框；
confirm();//确认框；
prompt();//提示框；
-->


<div class="listItem">
    <a name="backTop">
        <p align="center">常用标签</p>
    </a>
    <!--标题标签 <H#> #b标识几级标题-->
    <H>title</H>
    <H1> first class: title</H1>
    <H2>second class:title</H2>
    <H3>third class:title</H3>

    <!--字体标签-- face字体类型-->
    <font size="5" color="red" face="行书">字体标签</font>

    <!--特殊符号  （空格 &nbsp;）(双引号 &quot;) （小于 &lt;）(大于 &gt;) (版权号 &copy)-->
    <p align="center">5 &lt; 3</p>
    <p align="center">&copy;百度公司</p>

    <!--换行标签-->
    <br>

    <!--段落标签 (指定文字显示方式 align center居中  left  right )-->
    <p align="left">&nbsp;&nbsp;&nbsp;&nbsp;这是一个段落</p>


</div>
<!--分割线 -->
<HR size="3" color="red" width="100%">

<div class="listItem">
    <!--无序列表(type 1 ,circle)-->
    <p align="center">列表</p>
    <ul type="1">
        <li>填写用户信息</li>
        <li>邮箱确认</li>
        <li>注册成功</li>
    </ul>


    <ul type="circle">
        <li>填写用户信息</li>
        <li>邮箱确认</li>
        <li>注册成功</li>
    </ul>
    <br>

    <!--有序表-->
    <ol type="1">
        <li>填写用户信息</li>
        <li>邮箱确认</li>
        <li>注册成功</li>
    </ol>
    <!--表的嵌套-->
    <ol type="1">
        <li>帮助列表</li>
        <li>注册流程
            <ul type="circle">
                <li>填写用户信息</li>
                <li>邮箱确认</li>
                <li>注册成功</li>
            </ul>
        </li>
    </ol>
</div>
<HR size="3" color="blue" width="100%">

<div class="listItem">
    <!--预格式标签-->
    <p align="center">预格式标签</p>
<pre>
    qq会员一个月
    一口价：10.00元
    运费：免运费
    库存：9999
    宝贝类型：全新
</pre>
</div>

<div class="listItem">
    <!--超链接标签-->
    <p>超链接标签</p>
    <a href="viewport.html">cartoon list</a><br>
    <a href="http://baidu.com">百度一下，你就知道了</a><br>

    <!--<a>标签的锚标记 下例跳到name=register的地方-->
    <a href="#backTop">注册指南</a><br>

    <!--电子邮件连接(mailto:)-->
    <a href="mailto:1746861438@qq.com">作者邮箱</a><br>
</div>
<hr size="3" color="yellow" width="100%">

<div class="listItem">
    <!--图片标签  网页中长宽默认单位px （alt标签指鼠标移到图片上时的提示文字  align对齐标签-不支持）-->
    <p>图片标签</p>
    <img src="../img/avatar.jpg" alt="佩恩" width="100%" height="200">

    <!--滚动标签 (scrolldelay 滚动延时)  （direction  滚动方向）-->
    <p>跑马灯标签</p>
    <marquee scrolldelay="100" direction="left">
        <img src="../img/avatar.jpg" alt="佩恩" width="100%" height="200">
        <img src="../img/avatar.jpg" alt="佩恩" width="100%" height="200">
        <img src="../img/avatar.jpg" alt="佩恩" width="100%" height="200">
    </marquee>
</div>
<hr size="3" color="green" width="100%">

<div class="listItem">

    <!--<table>
    》创建表格  caption用于定义表格标签
    》<th>用来定义表头，通常为斜体
    -->
    <p>表格标签</p>
    <table align="center" border="2">
        <caption class="title">公司表格</caption>
        <tr align="center">
            <td>百度</td>
            <td>阿里</td>
            <td>腾讯</td>
        </tr>
        <tr align="center">
            <td>IBM</td>
            <td>Software</td>
            <td>Google</td>
        </tr>
    </table>

    <!--跨行跨列表格（colspan 跨列标签）（rowspan 跨行标签）-->
    <table class="table" align="center" border="15" bordercolor="pink" cellpadding="15"
           cellspacing="5">
        <tr>
            <td >国外公司</td>
            <td colspan="2">国内公司</td>
        </tr>
        <tr>
            <td rowspan="2">IBM</td>
            <td>百度</td>
            <td>华为</td>
        </tr>
        <tr>
            <td>阿里</td>
            <td>网易</td>
        </tr>
    </table>
</div>
<hr size="1" color="pink" width="100%">

<div class="listItem">

    <!--表单-->
    <p>表单标签</p>
    <form class="form" action="http://www.baidu.com" method="post">
        <p align="center">申请表</p><br>
        用户名：<input class="input" type="text"><br>
        密&nbsp;&nbsp;&nbsp;&nbsp;码：<input class="input" type="password"><br>
        感兴趣的职务：<br>
        <input type="radio" name="sex" checked="true">boy
        <input type="radio" name="sex">girl<br>
        <textarea cols="30" rows="5"></textarea><br>
        <input type="checkbox" name="send" checked="true">send<br>
        经验：
        <select>
            <option>0</option>
            <option>1 year</option>
            <option>2 year</option>
            <option>3 year</option>
        </select><br>

        兴趣网站：<input class="input" type="url" list="web_list"><br>
        Image Selector:<input class="button" type="file" name="image" multiple="multiple"><br>
        <input class="submit" type="submit" name="submit" value="提交">
        <input class="reset" type="reset" name="reset" value="重置"><br>


    </form>
</div>
<hr size="3" color="orange" width="100%">
<!--至于框架部分见web_frame.html-->

<!--结构化标记-->
<div class="listItem">
    <a href="https://www.baidu.com">
        <img class="listIcon" src="../img/avatar.jpg">
        百度一下
    </a><br>
</div>
<div class="listItem">
    <a href="https://www.taobao.com">
        <img class="listIcon" src="../img/avatar.jpg">
        购物找淘宝
    </a><br>

</div>
<div class="listItem">
    <a href="https://www.tencent.com">
        <img class="listIcon" src="../img/avatar.jpg">
        腾讯用游戏带来快乐
    </a><br>

</div>
<div class="listItem">
    <a href="https://www.ifeng.com">
        <img class="listIcon" src="../img/avatar.jpg">
        新闻
    </a><br>

</div>
</body>

</html>